<template>
  <div class="nft-intro-and-box">
    <div class="nft-intro">
      <div class="nft-intro-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, labore,
        dicta aperiam quae porro suscipit praesentium assumenda neque eius unde
        hic saepe nihil! Veritatis, repellendus. Alias saepe culpa aliquid
        earum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo
        repellendus, magni voluptatibus soluta, maxime
      </div>
    </div>

    <div class="nft-box-and-page-turner">
      <div class="nft-box">
        <div v-if="arr.length == 0" class="no-nfts">
          <div>You haven't got any MD Nft yet.</div>
        </div>
        <div v-else>
          <ul class="nft-list">
            <li
              v-for="(item, index) in arr.slice(nftsInPageStart, nftsInPageEnd)"
              :key="index"
            >
              <div
                class="nftbox1"
                @click="
                  visible = true;
                  nftIndex = item.certificateId;
                  liquidityOfCertificate = item.liquidity / 10 ** 18;
                  poolNameOfCertificate = item.poolName;
                  poolAddressOfCertificate = item.protocol;
                  handleNftsMedalsInit();
                "
              >
                {{ item.certificateId }}
              </div>
            </li>
            <li v-show="insertBlock">
              <div class="nftbox1 nftbox-hide"></div>
            </li>
          </ul>
        </div>

        <HandleNftsMedalsModal
          ref="handleNftsMedals"
          :visible="visible"
          :content="content"
          :nftIndex="nftIndex"
          :liquidity="liquidityOfCertificate"
          :poolName="poolNameOfCertificate"
          :poolAddress="poolAddressOfCertificate"
          @close="visible = false"
        >
        </HandleNftsMedalsModal>
      </div>
      <div class="page-turner page-turner-gov">
        <Pagination
          v-model:current="current"
          :total="arr.length"
          :pageSize="pageSize"
          @change="onPaginationChange"
          :showSizeChanger="false"
        >
          <template #itemRender="{ type, originalElement }">
            <div class="pagination-container" v-if="type === 'prev'">
              <div class="pagination-text">
                {{ pageSize * (current - 1) + 1 }} - {{ pageSize * current }} of
                {{ arr.length }} items
              </div>
              <img @click="pageDown()" src="@/assets/left-icon.svg" alt="" />
            </div>
            <div class="pagination-container" v-else-if="type === 'next'">
              <img @click="pageUp()" src="@/assets/right-icon.svg" alt="" />
            </div>
            <component :is="originalElement" v-else></component>
          </template>
        </Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { Pagination } from "ant-design-vue";
import HandleNftsMedalsModal from "../HandleNfts/HandleNftsMedalsModal.vue";
import store from "@/vuex/store";

export default {
  name: "certificateNfts",
  components: {
    HandleNftsMedalsModal,
    Pagination,
  },
  data() {
    return {
      visible: false,
      content: "i am nft",
      nftIndex: 0,
      nftsInPageStart: 0,
      nftsInPageEnd: 9,
      current: 1,
      pageSize: 9,
      liquidityOfCertificate: 0,
      poolNameOfCertificate: "",
      poolAddressOfCertificate: "",
      poolAddress: "",
    };
  },
  methods: {
    onPaginationChange(current, size) {
      this.current = current;
      this.pageSize = size;
      this.nftsInPageStart = (current - 1) * size;
      this.nftsInPageEnd = current * size;
    },
    pageUp() {
      if (this.nftsInPageStart + 9 >= this.arr.length) {
        return;
      } else {
        this.nftsInPageStart += 9;
        this.nftsInPageEnd += 9;
      }
    },
    pageDown() {
      if (this.nftsInPageEnd - 9 <= 0) {
        return;
      } else {
        this.nftsInPageStart -= 9;
        this.nftsInPageEnd -= 9;
      }
    },
    handleNftsMedalsInit() {
      this.$refs.handleNftsMedals.backToDetails();
    },
  },
  computed: {
    insertBlock() {
      if (this.nftsInPageStart + 9 <= this.arr.length) {
        return false;
      } else {
        let lastPageBlocks = this.nftsInPageEnd - this.arr.length;
        if (lastPageBlocks % 3 == 1) {
          return true;
        } else {
          return false;
        }
      }
    },
    arr() {
      let medals = store.state.web3Data.medalArr;
      let arrLength = medals.length;
      for (var i = 0; i < arrLength; i++) {
        let poolAddress = medals[i].protocol;
        medals[i]["poolName"] =
          store.state.web3Data.poolAddressArr[poolAddress]?.Protected;
        medals[i]["poolImage"] = store.state.storage.protocolImage[poolAddress];
      }
      return medals;
    },
    reward() {
      let reward = store.state.web3Data.reward;
      return reward;
    },
  },
  mounted() {
    store.dispatch("getMedalNfts");
  },
};
</script>

